<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
		  <u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view v-show="!loadingone">
			<navbar :name="hisUserId!='0'?'他的粉丝':'我的粉丝'"></navbar>
			<!-- 关注 -->
			<view class="bgf" v-if="attentionList.length >=0">
				<block v-for="(item,idx) in attentionList" :key="idx">
					<view class="attentionView" @tap="HisTap(item)">
						<view class="hx-attention">
							<u-lazy-load border-radius="50" height="96" img-mode="aspectFill"
								:image="item.userAvatarUrl"></u-lazy-load>
						</view>
						<view class="hx-name">
							{{item.userNickName}}
						</view>
						<view class="attention-btn2" v-if="item.mutualFollowFlag == 0" @tap.stop="attention(item)">
							关注
						</view>
						<view class="attention-btn" v-else @tap.stop="attention(item)">
							互相关注
						</view>
					</view>
					<u-line />
				</block>
			</view>
			<view  v-if="attentionList.length <=0" style="text-align: center;color: #9B9B9B;font-size: 30upx;">
				<view class="noDataicon">
				</view>
				暂无粉丝
			</view>
		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"


	export default {
		components: {
			uLoading,
			uLazyLoad,
			uLine,
		},
		data() {
			return {
				hisUserId:'0',
				loadingone:false,
				pageCurrent:1,//页数
				pageSize:10,//条数
				attentionList: [],
			}
		},
		onLoad(e) {
			this.hisUserId = e.hisUserId?e.hisUserId:'0';
			this.followGF(2,this.pageCurrent,this.pageSize)//获取粉丝
		},
		methods:{
			// 他的主页
			HisTap(item){
				uni.navigateTo({
					url:'/pagesMy/my/homepage/homepage?hisUserId='+item.userId
				})
			},
			// 关注
			follow(id) {
				let _this = this,
					fdata = {
						followedId: id, //被关注id
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					};
				this.$cms.post(global.apiUrls.follow, fdata).then(res => {
					if (res.data.code == 1000) {
						uni.showToast({
							title: '关注成功',
							duration: 2000
						});
						_this.followGF(2,_this.pageCurrent,_this.pageSize)//获取粉丝
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
				})
			},
			// 取关
			DeleteFollow(id){
				let _this = this,
					fdata = {
						followedId: id, //被关注id
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					};
				this.$cms.delete(global.apiUrls.follow, fdata).then(res => {
					if (res.data.code == 1000) {
						uni.showToast({
							title: '取关成功',
							duration: 2000
						});
						_this.followGF(2,_this.pageCurrent,_this.pageSize)//获取粉丝
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
				})
			},
			// 关注按钮
			attention(item){
				if(item.mutualFollowFlag == 1){//取关
					// this.DeleteFollow(item.followedId)
					this.DeleteFollow(item.userId)
				}else{//关注
					// this.follow(item.followedId)
					this.follow(item.userId)
				}
			},
			//获取粉丝
			// uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
			followGF(type,pageCurrent,pageSize) {
				this.loadingone = true;
				let _this = this;
				let hisUserId = this.hisUserId;
				if(hisUserId == '0'){//我的关注
					this.$cms.get(global.apiUrls.followGF + '?type='+type+'&userId='+uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					+'&nickName=&pageCurrent='+pageCurrent+'&pageSize='+pageSize+'&hisUserId='+this.hisUserId, {})
						.then(res => {
							if (res.data.code == 1000) {
								let records = res.data.result.records;
								_this.attentionList = records
							}
							_this.loadingone = false;
						}).catch(err => {})
				}else{//他的关注
					this.$cms.get(global.apiUrls.getHisList + '?type='+type+'&userId='+uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					+'&nickName=&pageCurrent='+pageCurrent+'&pageSize='+pageSize+'&hisUserId='+this.hisUserId, {})
						.then(res => {
							if (res.data.code == 1000) {
								let records = res.data.result.records;
								_this.attentionList = records
							}
							_this.loadingone = false;
						}).catch(err => {})
				}
			},
		}
	}
</script>

<style lang="scss">
	.noDataicon {
		width: 213upx;
		height: 209upx;
		background: url(https://bsyjk-pic.bsyjk.cn/empty/EFF804A9156249AD920DEF9CC805EFC7.png)no-repeat;
		background-size: 213upx 209upx;
		margin: 400upx auto 30upx;
	}
	.bgf{
		width: 750upx;
		background: #fff;
		margin: 0 auto;
	}
	.attentionView{
		width: 710upx;
		height: 156upx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.hx-attention{
			width: 96upx;
			height: 96upx;
			margin-right: 19upx;
		}
		.hx-name{
			width: 450upx;
			// margin-top:29upx;
		}
		.attention-btn{
			width: 130upx;
			height: 50upx;
			background: #E2E1E2;
			border-radius: 13upx;
			margin-top:30upx;
			font-size: 24upx;
			font-weight: 500;
			color: #9B9B9B;
			text-align: center;
			line-height: 50upx;
		}
		.attention-btn2{
			width: 130upx;
			height: 50upx;
			background: #FF930A;
			border-radius: 13upx;
			border: 2upx solid #FF930A;
			font-size: 24upx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 50upx;
			text-align: center;
		}
	}
</style>
